<template>
    <div class="app-container">
        <el-form :model="conditionForm" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" size="small">
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="conditionForm.userName" placeholder="请输入用户名称" clearable style="width: 240px"
                    @keyup.enter="setCondition" />
            </el-form-item>
            <el-form-item label="状态" prop="flags">
                <el-select v-model="conditionForm.flags" placeholder="用户状态" clearable style="width: 240px">
                    <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="conditionForm.dateTimes" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    style="width: 300px;"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="setCondition">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button size="medium" type="primary" plain icon="el-icon-plus" @click="handleAdd"
                    v-hasPermi="['system:user:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="medium" type="success" plain icon="el-icon-edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:user:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="medium" type="danger" plain icon="el-icon-delete" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="medium" type="info" plain icon="el-icon-upload" @click="handleImport"
                    v-hasPermi="['system:user:import']">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="medium" type="warning" plain icon="el-icon-download" @click="handleExport"
                    v-hasPermi="['system:user:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch="showSearch" @queryTable="selectData" @updateShowSearch="updateShowSearch"
                :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="tableLoading" :data="dataTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="用户编号" align="center" key="loginId" prop="loginId" v-if="columns[0].visible" />
            <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
                :show-overflow-tooltip="true" />
            <!-- <el-table-column label="部门" align="center" key="userName" prop="userName" v-if="columns[1].visible"
                :show-overflow-tooltip="true" /> -->
            <el-table-column label="状态" align="center" key="flags" v-if="columns[5].visible">
                <template #default="scope">
                    <el-switch v-model="scope.row.flags" :active-value="0" :inactive-value="1"
                        @change="handleStatusChange(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
                <template #default="scope">
                    <span>{{ timeFormat(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                <template #default="scope">
                    <div v-if="!scope.row.isAdmin">
                        <el-tooltip content="修改" placement="top" v-if="scope.row.businessId !== 1">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:user:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top" v-if="scope.row.businessId !== 1">
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                                v-hasPermi="['system:user:remove']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="重置密码" placement="top" v-if="scope.row.businessId !== 1">
                            <el-button size="mini" type="text" icon="el-icon-key" @click="handleResetPwd(scope.row)"
                                v-hasPermi="['system:user:resetPwd']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="分配角色" placement="top" v-if="scope.row.businessId !== 1">
                            <el-button size="mini" type="text" icon="el-icon-circle-check"
                                @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                        </el-tooltip>
                    </div>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination :total="pageInfo.total" background layout="total,sizes, prev, pager, next"
            :page-size="pageInfo.pageSize" :current-page="pageInfo.pageIndex" :page-sizes="[10, 20, 30, 40, 50]"
            @size-change="pageSizeChange" @current-change="selectData" style="float:right;"></el-pagination>
        <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body
            :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名称" prop="userName">
                            <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="用户密码" prop="password">
                            <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
                                show-password disabled />
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.flags">
                                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                                    dict.label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item v-if="flag === 'add'" label="员工号" prop="loginId">
                            <el-input v-model="form.loginId" placeholder="请输入员工号" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属部门" prop="departmentId">
                            <!-- <el-select v-model="form.departmentId" placeholder="请选择">
                                <el-option v-for="(item, index) in deptOptions" :key="index" :label="item" :value="item">
                                </el-option>
                            </el-select> -->
                            <treeselect v-model="form.departmentId" :options="deptOptions" :show-count="true"
                                placeholder="请选择归属部门" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" v-dialogDrag append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <AuthRole :openAuth="openAuthRole" :authID="authID" @closeAuth="closeAuth" />
    </div>
</template>
 
<script setup lang="ts" name="User">
import { getToken } from "@/utils/auth";
import { ref, reactive, getCurrentInstance, toRefs, Ref, onMounted } from "vue";
import { changeUserStatus, listUser, delUser, getUser, updateUser, addUser, resetUserPwd } from "@/requests/api/sys-user";

import { dictTypeInit } from "../dict/data";
import { timeFormat, timeRangeTransform } from "@/utils/time";
import RightToolbar from '@/components/RightToolbar.vue';
import { useShowSearch } from "@/hooks/useShowSearch";
import { usePagination } from "@/hooks/usePagination";
import { conditionCommon, purTableHeader, purTableProps, userSearchformInit } from "./data";
import { queryParamsInit } from "@/views/data";
import { useReset } from "@/hooks/useReset";
import { Message, MessageBox } from "element-ui";
import { exportExcel, filterExcelContentArr } from "@/utils/excel";
import AuthRole from "./AuthRole.vue";
import { getDepart } from "@/requests/api/department";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

const { proxy }: any = getCurrentInstance();
const sys_normal_disable = ref(dictTypeInit)
// const sys_user_sex = ref(sexTypeInit)
const open = ref(false);
const { showSearch, updateShowSearch } = useShowSearch();
let selectedArr: Array<any> = []
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const title = ref("");
const deptOptions: Ref<any> = ref(undefined);
/*** 用户导入参数 */
const upload = reactive({
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
});
// 列显隐信息
const columns = ref([
    { key: 0, label: `用户编号`, visible: true },
    { key: 1, label: `用户名称`, visible: true },
    { key: 2, label: `用户昵称`, visible: true },
    { key: 3, label: `部门`, visible: true },
    { key: 4, label: `手机号码`, visible: true },
    { key: 5, label: `状态`, visible: true },
    { key: 6, label: `创建时间`, visible: true }
]);
const flag = ref('add');
const data = reactive({
    form: {
        "loginId": "",
        "userName": "",
        "departmentId": "",
        "remark": "",
        "flags": "",
        "password": "finance-123456"
    },
    // 条件查询的参数
    conditionForm: Object.assign({
        dateTimes: [],
    }, conditionCommon),
    queryParams: Object.assign({
        condition: Object.assign({
            "startTime": "",
            "endTime": ""
        }, conditionCommon)
    }, queryParamsInit),
    rules: {
        userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
        // nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        loginId: [{ required: true, message: "员工号不能为空", trigger: "blur" }],
        departmentId: [{ required: true, message: "部门不能为空", trigger: "click" }],
        password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],
        email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
        phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
    }
});

const { conditionForm, queryParams, form, rules } = toRefs(data);
/** 查询用户列表 */
const { dataTable,
    pageInfo,
    pageSizeChange,
    selectData, tableLoading } = usePagination(queryParams, listUser)
console.log('dataTable', dataTable)
// /** 通过条件过滤节点  */
// const filterNode = (value: any, data: any) => {
//     if (!value) return true;
//     return data.label.indexOf(value) !== -1;
// };

// /** 节点单击事件 */
// function handleNodeClick(data: Record<string, any>) {
//     queryParams.value.departmentId = data.id;
//     setCondition();
// };
/** 搜索按钮操作 */
function setCondition() {
    console.log('查询条件user', conditionForm.value)
    pageInfo.value.pageIndex = 1;
    if (queryParams.value.condition) {
        const { dateTimes, userName, flags } = conditionForm.value
        queryParams.value.condition.flags = flags;
        queryParams.value.condition.userName = userName;
        timeRangeTransform(dateTimes, queryParams);
    }
    selectData();
};
/** 表单重置 */
const userRef: Ref<any> = ref(null)
/** 重置按钮操作 */
const queryRef: Ref<any> = ref(null)
const { reset, resetQuery } = useReset({
    form,
    formInit: Object.assign({}, userSearchformInit),
    formRef: userRef,
    conditionForm,
    conditionFormRef: queryRef,
    request: setCondition
})
/** 删除按钮操作 */
function handleDelete(row: any) {
    const businessId = row.businessId || ids.value;
    MessageBox.confirm('是否确认删除用户编号为"' + businessId + '"的数据项？').then(function () {
        return delUser(businessId);
    }).then(() => {
        selectData();
        Message.success("删除成功");
    }).catch(() => { });
};
/** 导出按钮操作 */
function handleExport() {
    const sheetArr = filterExcelContentArr(selectedArr, purTableProps, purTableHeader)
    console.log('过滤的值', sheetArr)
    exportExcel(`user_${new Date().getTime()}.xlsx`, sheetArr)
};
/** 用户状态修改  */
function handleStatusChange(row: any) {
    let text = row.flags === 0 ? "启用" : "停用";
    MessageBox.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
        return changeUserStatus(row.businessId
            , row.flags);
    }).then(() => {
        Message.success(text + "成功");
    }).catch(function () {
        row.flags = row.flags === 0 ? 1 : 0;
    });
};
const openAuthRole = ref(false)
const authID = ref("0")
/** 跳转角色分配 */
function handleAuthRole(row: any) {
    authID.value = row.businessId;
    openAuthRole.value = true;
};
/** 重置密码按钮操作 */
function handleResetPwd(row: any) {
    proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
    }).then(async ({ value }: any) => {
        console.log('value', value)
        const res: any = await resetUserPwd(row.businessId, value)
        if (res.code === 200) {
            Message.success("修改成功，新密码是：" + value);
        } else {
            Message.error(res.message);
        }
    }).catch(() => { });
};
/** 选择条数  */
function handleSelectionChange(selection: any) {
    selectedArr = selection;
    ids.value = selection.map((item: any) => item.businessId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
};
/** 导入按钮操作 */
function handleImport() {
    upload.title = "用户导入";
    upload.open = true;
};
/** 下载模板操作 */
function importTemplate() {
    exportExcel(`user_template_${new Date().getTime()}.xlsx`, filterExcelContentArr([], purTableProps, purTableHeader))
};
/**文件上传中处理 */
const handleFileUploadProgress = () => {
    upload.isUploading = true;
};
const uploadRef: Ref<any> = ref(null)
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: any) => {
    upload.open = false;
    upload.isUploading = false;
    uploadRef.value.handleRemove(file);
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    selectData();
};
/** 提交上传文件 */
function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
};
/** 重置操作表单 */

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
};
/** 新增按钮操作 */
const handleAdd = async () => {
    reset();
    open.value = true;
    title.value = "添加用户";
    flag.value = "add";
};
/** 修改按钮操作 */
function handleUpdate(row: any) {
    reset();
    const businessId = 'businessId' in row ? row.businessId : ids.value; // 行和上面
    getUser(businessId).then((res: any) => {
        console.log('row', res)
        if (res.code === 200) {
            form.value = res.data;
        }
        open.value = true;
        title.value = "修改用户";
        flag.value = "update";
        // form.password = "";
    });
};
/** 提交按钮 */
function submitForm() {
    userRef.value.validate(async (valid: boolean) => {
        if (valid) {
            console.log('form123', flag.value, form.value)
            let data: any = {}
            let msg = ''
            if (flag.value !== "add" && form.value.loginId != undefined) {
                data = await updateUser(form.value)
                msg = '修改'
            } else {
                data = await addUser(form.value)
                msg = '新增'
            }
            if (data.code === 200) {
                Message.success(`${msg}成功`);
                open.value = false;
                selectData();
            }

        }
    });
};
const closeAuth = () => {
    openAuthRole.value = false
}
selectData();
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
    const res = await getDepart(-1);
    console.log('部门数据', res)
    deptOptions.value = (res.data! as any).map((item: any) => (Object.assign({
        id: item.departmentId
        , label: item.departmentName
    }, item,)))
};
onMounted(async () => {
    getDeptTree()
})

</script>
 